<header class="flex pt-2">
  <input
    nz-input
    type="text"
    class="flex-1 px-3 eo-search-input"
    i18n-placeholder="@@Search"
    placeholder="Search"
    [(ngModel)]="searchValue"
  />
  <button
    *ngIf="!status.isShare"
    nzType="primary"
    nz-button
    class="flex w-[20px] items-center justify-center ml-3 text-base shrink-0"
    nz-dropdown
    [nzDropdownMenu]="menu"
    nzPlacement="bottomRight"
    (click)="operateApiEvent({ event: $event, eventName: 'addAPI' })"
  >
    <eo-iconpark-icon name="plus" size="16px"></eo-iconpark-icon>
  </button>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'addAPI' })">
        <a i18n="@@AddAPI">New API</a>
      </li>
      <li nz-menu-item (click)="addGroup()"><a i18n>New Group</a></li>
      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'importAPI' })">
        <a i18n>Import API</a>
      </li>
    </ul>
  </nz-dropdown-menu>
</header>

<!-- Custom Group -->
<div class="group_container group-tree pt10">
  <nz-tree
    *ngIf="treeNodes.length"
    [nzData]="treeNodes"
    [nzSelectedKeys]="nzSelectedKeys"
    #apiGroup
    [nzSearchValue]="searchValue"
    [nzHideUnMatched]="true"
    [nzExpandedKeys]="expandKeys"
    (nzClick)="clickTreeItem($event)"
    (nzExpandChange)="toggleExpand()"
    [nzDraggable]="isEdit"
    nzBlockNode
    (nzOnDrop)="treeItemDrop($event)"
    [nzTreeTemplate]="nzTreeTemplate"
  ></nz-tree>
  <nz-skeleton [nzLoading]="apiDataLoading && !treeNodes.length" [nzActive]="true">
    <ng-template #nzTreeTemplate let-node let-origin="origin">
      <div [style.--tree-level]="node.level">
        <!-- Folder -->
        <div class="tree_node f_row f_js_ac" *ngIf="!node.isLeaf">
          <div class="overflow-hidden f_row_ac text-ellipsis">
            <span class="text_omit node_title">{{ node.title }}</span>
          </div>
          <span class="flex tree_node_operate" *ngIf="isEdit">
            <button nz-dropdown [nzDropdownMenu]="groupMenu" class="flex items-center">
              <eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon>
            </button>
            <nz-dropdown-menu #groupMenu="nzDropdownMenu">
              <ul nz-menu>
                <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'addAPI', node: node })">
                  <a i18n>Add API</a>
                </li>
                <li nz-menu-item (click)="addSubGroup(node)">
                  <a i18n>Add Subgroup</a>
                </li>
                <li nz-menu-item (click)="editGroup(node)">
                  <a i18n>Edit</a>
                </li>
                <li nz-menu-item (click)="deleteGroup(node)">
                  <a i18n="@@Delete">Delete</a>
                </li>
              </ul>
            </nz-dropdown-menu>
          </span>
        </div>
        <!-- Leaf -->
        <div class="tree_node f_row f_js_ac" *ngIf="!node.origin?.isFixed && node.isLeaf">
          <div class="overflow-hidden f_row_ac text-ellipsis">
            <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
              node.origin.method
            }}</b>
            <span class="text_omit node_title">{{ node.title }}</span>
          </div>
          <div class="flex tree_node_operate">
            <button
              class="flex items-center"
              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"
            >
              <eo-iconpark-icon class="mr5" name="lightning" size="15px"></eo-iconpark-icon>
            </button>
            <button class="flex items-center" nz-dropdown [nzDropdownMenu]="apiDataMenu" *ngIf="isEdit">
              <eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon>
            </button>
            <nz-dropdown-menu #apiDataMenu="nzDropdownMenu">
              <ul nz-menu>
                <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'editApi', node: node })">
                  <a i18n>Edit</a>
                </li>
                <li
                  nz-menu-item
                  (click)="operateApiEvent({ event: $event, eventName: 'copyApi', node: apiDataItems[node.key] })"
                >
                  <a i18n="@@Copy">Copy</a>
                </li>
                <li
                  nz-menu-item
                  (click)="operateApiEvent({ event: $event, eventName: 'deleteApi', node: apiDataItems[node.key] })"
                >
                  <a i18n="@@Delete">Delete</a>
                </li>
              </ul>
            </nz-dropdown-menu>
          </div>
        </div>
      </div>
    </ng-template>

    <nz-empty *ngIf="!treeNodes.length" nzNotFoundImage="simple"> </nz-empty>
  </nz-skeleton>
</div>
